<style lang='less'>
    @import '~style/filter.less';
     .rightContBigBox{
        position: relative;
        .searchDiv{
            height: 100%;
            padding-top: 3rem;
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            top: 0;
            .el-col-22{
                height: 100%;
            }
        }
     }
    .contBox {
        text-align: left;
        width: 100%;
        height: 100%;
        font-size: 14px;
        .dataBox{
          margin-top: 20px;
          text-align: center;
        }
        .paginationBox{
          float: right;
          margin: 20px 0;
        }
    }

    #couponRecordList{
      .tabsBox{
          .el-tabs__header {
            border-color: #f7931e;
            .el-tabs__active-bar{
              background: #f7931e;
              height: 5px;
            }
            .el-tabs__nav-scroll .is-active{
              background: #fff;
              color: #f7931e;
              border-color: #f7931e;
              line-height: 60px;
              height: 60px;
              font-size: 14px;
            }
            .el-tabs__item{
              color: rgb(72, 98, 106);
              :hover{
                color: #f7931e;
              }
            }
          }
      }
    }
</style>

<template>
    <div class="rightContBigBox contBox" id='couponRecordList'>
      <div class="tabsBox">
        <el-tabs v-model="filterCondition.viewType" @tab-click="handleClick">
          <el-tab-pane label="使用记录" name="COUPON_USED">
             <filterBox
              v-if='filterCondition.viewType == "COUPON_USED"'
              :filterObj='filterCondition'
              :buttonConfig='getButtonConfig'
              v-on:setfilterConditionListShow='setfilterConditionListShow'
              v-on:setfilterConditionExport='setfilterConditionExport'
            ></filterBox>
            <formBox
              v-if='filterCondition.viewType == "COUPON_USED"'
              :viewType='filterCondition.viewType'
              :filterPageNum='filterPageNum'
              :data='data'
              v-loading='loading.COUPON_USED'
              v-on:setfilterConditionListShow='setfilterConditionListShow'
            ></formBox>
          </el-tab-pane>

          <el-tab-pane label="转发记录" name="COUPON_SEND_BY_FINANCIAL">
             <filterBox
              v-if='filterCondition.viewType == "COUPON_SEND_BY_FINANCIAL"'
              :filterObj='filterCondition'
              :buttonConfig='getButtonConfig'
              v-on:setfilterConditionListShow='setfilterConditionListShow'
              v-on:setfilterConditionExport='setfilterConditionExport'
            ></filterBox>
             <formBox
              v-if='filterCondition.viewType == "COUPON_SEND_BY_FINANCIAL"'
              :viewType='filterCondition.viewType'
              :filterPageNum='filterPageNum'
              :data='data'
              v-loading='loading.COUPON_SEND_BY_FINANCIAL'
              v-on:setfilterConditionListShow='setfilterConditionListShow'
            ></formBox>
          </el-tab-pane>

          <el-tab-pane label="发放记录" name="COUPON_SEND_BY_SYSTEM">
             <filterBox
              v-if='filterCondition.viewType == "COUPON_SEND_BY_SYSTEM"'
              :filterObj='filterCondition'
              :buttonConfig='getButtonConfig'
              v-on:setfilterConditionListShow='setfilterConditionListShow'
              v-on:setfilterConditionExport='setfilterConditionExport'
            ></filterBox>
            <formBox
              v-if='filterCondition.viewType == "COUPON_SEND_BY_SYSTEM"'
              :viewType='filterCondition.viewType'
              :filterPageNum='filterPageNum'
              :data='data'
              v-loading='loading.COUPON_SEND_BY_SYSTEM'
              v-on:setfilterConditionListShow='setfilterConditionListShow'
            ></formBox>
          </el-tab-pane>

        </el-tabs>
      </div>
     
    </div>
  
</template>

<script>
    import moment from 'moment';
    import navTitle from 'components/Title.vue';
    import filterBox from './filterBox.vue';
    import formBox from './formBox.vue';
    import {getCouponRecordList, getCouponRecordExportExcel} from 'api/coupon/index.js'

    export default {
      props:[''],
      components:{
          navTitle,
          filterBox,
          formBox,
      },
      computed:{
        getButtonConfig(){
          return this.$store.getters.getButtonConfig('couponRecord')
        }
      },
      data(){
        return{
          data:[],//查询回来的数据
          filterCondition:{//查询条件
              viewType:'COUPON_USED',//tab 选项 COUPON_USED:使用记录    COUPON_SEND_BY_FINANCIAL: 转发记录    COUPON_SEND_BY_SYSTEM:发放记录   ,
              deleted:'NO',//是否查询删除的，默认'NO'
              cardIdText:'',
              userName:'',
              orderBy:'id',//默认排序
              xsc:'DESC',//默认排序
              moblie:'',
              orderId:'',
              sourceName:'',
              type:'',
              status:'',
              tempDay:[moment().subtract(1,'days'), moment()],//默认查询一天
              dayEnd: moment().format('YYYY-MM-DD'),//默认查询一天
              dayStart:moment().subtract(1,'days').format('YYYY-MM-DD'),//默认查询一天
          },
          filterPageNum:{//筛选条件－分页
            totalSize:0,//总条数
            curPage:1,//当前页，页面显示1开始，后台查询0开始
            pageSize:20,//默认每页显示的条数
          },
          loading:{
            COUPON_USED:false,
            COUPON_SEND_BY_FINANCIAL:false,
            COUPON_SEND_BY_SYSTEM:false,
        },
        }
      },
      methods:{
        async handleClick(tab, event) {
          await this.returnDefault()
          this.setfilterConditionListShow()
        },
        returnDefault(){//切换tab后，查询条件 要恢复成默认值
          let defaulObj ={
              deleted:'NO',//是否查询删除的，默认'NO'
              cardId:'',
              userName:'',
              moblie:'',
              orderBy:'id',
              xsc:'DESC',
              orderId:'',
              sourceName:'',
              type:'',
              status:'',
              tempDay:[moment().subtract(1,'days'), moment()],//默认查询一天
              dayEnd: moment().format('YYYY-MM-DD'),//默认查询一天
              dayStart:moment().subtract(1,'days').format('YYYY-MM-DD'),//默认查询一天
          }
          Object.assign(this.filterCondition, defaulObj) //查询条件恢复默认值，注意不要覆盖viewType
          console.log(this.filterCondition)
          this.filterPageNum = {//筛选条件－分页
            totalSize:0,//总条数
            curPage:1,//当前页，页面显示1开始，后台查询0开始
            pageSize:20,//默认每页显示的条数
          }

        },
        setParams(obj1){//部分请求参数不能传空值！
            let {keys} = Object, params={};
            for(let key of Object.keys(obj1)){
              if(obj1[key] || obj1[key]  === 0){
                params[key] = obj1[key]
              }
            }
            return params
        },
        async setfilterConditionListShow(){ //筛选
          try{
            let params = {},curPage = this.filterPageNum.curPage -1;
            Object.assign(params, this.filterCondition, this.filterPageNum)
            params.curPage = curPage;
            delete params.totalSize;
            params =this.setParams(params)
            this.loading[this.filterCondition.viewType] = true
            let back = await getCouponRecordList(params)
            back = back.data
            // console.log('setfilterConditionListShow', back)
            if(back.resultCode == '200'){
              this.data = back.result;
              this.filterPageNum.totalSize = back.size;
            }else{
              this.$alert(back.msg)
            }
            this.loading[this.filterCondition.viewType] = false
            
          }catch(err){
            this.loading[this.filterCondition.viewType] = false
            console.error(err)
            this.$alert('查询错误！')
          }
        },
        async setfilterConditionExport(){//导出
          let data = await getCouponRecordExportExcel(this.filterCondition)
          // console.log('setfilterConditionExport', data.request.responseURL)
          window.location.href=data.request.responseURL;
          

        },
      },
      created(){
        this.setfilterConditionListShow()
        this.$emit('setTitleMsg', ['卡券管理','使用记录'])

      },
      mounted(){

      },
    }
</script>